<template>
  <div class="lan-header-container">
    <div class="title">{{ config.title }}</div>
    <div class="buttons">
      <el-button
        v-show="button.isShow?button.isShow:true"
        v-for="(button,index) in config.buttons"
        :key="index"
        :icon="button.icon.includes('el-icon')?button.icon:''"
        :class="[button.type?'buttons-'+button.type:'']"
        :type="button.type"
        :size="button.size"
        :plain="button.plain"
        :round="button.round"
        :circle="button.circle"
        @click="button.method"
      >
        <svg-icon
          v-if="button.icon&&!button.icon.includes('el-icon')"
          :icon-class="button.icon"
          class="svg-icon"
        ></svg-icon>{{ button.text }}
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    config: {
      type: Object,
      default: () => {}
    }
  }
};
</script>

<style lang="scss" scoped>
.lan-header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 20px 20px;
  .title {
    font-size: 24px;
    font-weight: 800;
  }
  .buttons {
    .svg-icon {
      margin-right: 5px;
    }
    &-primary {
      color: #fff;
      background: #2c83b1;
    }
    &-danger {
      color: #fff;
      background-color: #f24d1f;
    }
    &-success {
      color: #fff;
      background-color: #42b983;
    }
  }
}
</style>
